<template>
    <div>
        <el-tabs v-model="activeName">

            <el-tab-pane label="基础信息" name="Datas">

                <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="工作站编码" prop="WorkstationCode">
                                <el-input v-model="model.WorkstationCode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="工作站名称" prop="WorkstationName">
                                <el-input v-model="model.WorkstationName"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="工作站地点" prop="WorkstationAddress">
                                <el-input v-model="model.WorkstationAddress"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="所在车间" prop="WorkshopId">
                                <el-select :value="model.WorkshopName" placeholder="请选择车间" @change="WorkShopChange">
                                    <el-option v-for="Workshop in WorkshopList" :key="Workshop.Id"
                                        :label="Workshop.WorkshopName" :value="Workshop"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属工序" prop="ProcessId">
                                <el-select :value="model.ProcessName" placeholder="请选择工序" @change="ProProcessChange">
                                    <el-option v-for="Process in ProProcessList" :key="Process.Id"
                                        :label="Process.ProcessName" :value="Process"></el-option>
                                </el-select>
                            </el-form-item>

                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否启用" prop="EnableFlag">
                                <el-radio-group v-model="model.EnableFlag">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="备注" prop="Remark">
                                <el-input v-model="model.Remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>



                </el-form>

            </el-tab-pane>

            <el-tab-pane label="设备资源" name="WorkstationMachine">


                <div class="page-tool">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addMachine" size="small">新增</el-button>
                    <el-button type="danger" plain icon="el-icon-delete" size="small" @click="delMachine">删除</el-button>
                </div>


                <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="MachineryCode" label="设备编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="MachineryName" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column  prop="CreateTime" label="时间" :show-overflow-tooltip="true"></el-table-column>

                    <el-table-column prop="Quantity" label="数量" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Quantity"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Remark"/>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

        </el-tabs>

        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>

         <!--弹窗-->
         <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
            :visible.sync="dialogDomain.dialogVisible" width="60%" >
              <ProductMachineryInput :MachineryList="tableData" @callback="AddMachineryCallBack" 
              v-if="dialogDomain.dialogVisible"/>
        </el-dialog>
    </div>
</template>

<script>

import ProductMachineryInput from './ProductMachineryInput.vue';


export default {
    components:{
        ProductMachineryInput,
    },
    
    props: {
        model: {
            require: true,
            type: Object
        },
        isUpdate: {
            require: true,
            type: Boolean
        },
        ProProcessList:{
            type:Array,
            required:true
        },
        WorkshopList:{
            type:Array,
            required:true
        }
    },
    data() {
        return {
            activeName: 'Datas',

            workshopOptions:[],
            ProProcesstions:[],

            WorkstationList: [],
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0,
            },
            tableData: [],
            isLoading: false,
             //对话框对象
             dialogDomain: {
                title: '工作站产品选择',
                dialogVisible: false,
                dialogType: 0  
            },
            rules: {
                WorkstationCode: { required: true, message: '请输入工作站编码', trigger: 'blur' },
                WorkstationName: { required: true, message: '请输入工作站名称', trigger: 'blur' },
                WorkstationAddress: { required: true, message: '请输入工作站地点', trigger: 'blur' },
                WorkshopId: { required: true, message: '请选择所在车间' },
                ProcessId: { required: true, message: '请选择所属工序'},
            }

        }
    },
    created(){
        if(this.isUpdate)
            this.GetWorkstationbyId(this.model.Id);
    },
    methods:{
        WorkShopChange(model){
            console.log(model)
            this.model.WorkshopId=model.Id;
            this.model.WorkshopCode=model.WorkshopCode;
            this.model.WorkshopName=model.WorkshopName;
        },
        ProProcessChange(model){
            console.log(model)
            this.model.ProcessId=model.Id;
            this.model.ProcessCode=model.ProcessCode;
            this.model.ProcessName=model.ProcessName;
        },
        addMachine() {
            this.dialogDomain.title = "选择设备资源";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 1;
        },
        delMachine(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请选择一项');
                return;
            }

            this.$refs.dataForm.selection.forEach(row => {
                const index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
            });
        },
        //删除设备资源
        del(model) {
            let index = this.tableData.indexOf(model);
            this.tableData.splice(index,1);
        },

        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        add() {
            this.$http.postForm('/api/Workstation', { model: this.model,WorkstationMachineString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then(res => {
                this.$emit('callback');
            })

        },
        //修改
        put() {
            this.$http.putForm('/api/Workstation', { model: this.model,WorkstationMachineString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },


        GetWorkstationbyId(Id) {
            this.isLoading=true;
            this.$http.get('/api/Workstation/GetWorkstationbyId',{
                params:{
                    WorkstationId:Id
                }
            })
            .then(res => {
                this.tableData = res.Data;
                this.isLoading=false;
            })
        },
        
        //新增或编辑页面回调
        AddMachineryCallBack() {
            this.dialogDomain.dialogVisible = false;
        },

    }


}

</script>